<template>
    <div class="app-container">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">

            <el-form-item label="开始日期" prop="startTime">
                <el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="选择开始日期"
                    value-format="yyyy-MM-dd HH:mm:ss" />
            </el-form-item>
            <el-form-item label="结束日期" prop="endTime">
                <el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="选择结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss" />
            </el-form-item>
            <el-form-item label="排序">
                <el-select v-model="queryParams.orderFiled" placeholder="请选择">
                    <el-option label="时间倒序" value="create_time" />
                    <el-option label="金额倒序" value="amount" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="top">
            <p>提现总额:{{totalStatistics.totalAmount}}</p>

            <p>USDT提现值总额:{{totalStatistics.usdtTotalAmount}}</p>
            <p>支付宝提现总额:{{totalStatistics.rmbTotalAmount}}</p>

            <p>银行卡提现总额:{{totalStatistics.transferTotalAmount}}</p>

        </div>
        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border show-summary fit
            highlight-current-row :summary-method="getSummaries">
            <el-table-column align="center" label="序号" width="95">
                <template slot-scope="scope">
                    {{ scope.$index }}
                </template>
            </el-table-column>
            <el-table-column label="用户id	" align="center" prop="userId" />
            <el-table-column label="备注" align="center" prop="remarks" />
            <el-table-column label="金额" align="center" prop="amount" />
            <el-table-column label="时间" align="center" prop="createTime" />
            <el-table-column label="类型" align="center" prop="type" />
        </el-table>
        <div class="pagination">
            <el-pagination :current-page.sync="queryParams.pageNum" :page-sizes="[10, 20, 30, 40]"
                :page-size.sync="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="fetchData" @current-change="fetchData" />
        </div>

    </div>
</template>

<script>
import { withdrawalStatistics , totalStatistics} from '@/api/table'
export default {
    components: {
    },
    data() {
        return {
            list: null,
            listLoading: true,
            timer: null,
            total: 0,
            typeOptions: [
                { label: '虚拟货币', value: 'usdt' },
                { label: '人民币', value: 'rmb' }
            ],
            statusOptions: [
                { label: '申请中', value: 'applying' },
                { label: '审核通过', value: 'approved' },
                { label: '审核驳回', value: 'reject' }

            ],
            amountTotal: "",
            queryParams: {

                "endTime": "",
                "orderFiled": "create_time",
                "pageNum": 1,
                "pageSize": 10,
                "startTime": ""
            },
            totalStatistics:{
                rmbTotalAmount:0,
                totalAmount:0,
                transferTotalAmount:0,
                usdtTotalAmount:0
            }
        }
    },
    created() {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        this.queryParams.startTime = start
        this.queryParams.endTime = end
        this.fetchData()

    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    destroyed() {
        clearInterval(this.timer)
    },
    methods: {
        getTotal(){
            totalStatistics(this.queryParams).then(res=>{
                this.totalStatistics = res.data
            })
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '金额总额';
                    return;
                }
                if (index === 1) {
                    sums[index] = this.amountTotal;
                    return;
                }

            });

            return sums;
        },
        fetchData() {
            this.listLoading = true
            this.getTotal()
            withdrawalStatistics(this.queryParams).then(response => {
                response.data.records.map(item => {
                    item.type = item.address.indexOf('支付宝') == -1 ? item.address.indexOf('银行') == -1 ? 'usdt' : '银行卡' : '支付宝'
                })
                this.amountTotal = response.message
                this.list = response.data.records
                this.listLoading = false
                this.total = response.data.total
            })
        },

        onSubmit() {
            this.queryParams.page = 1
            this.fetchData()
        },
        reset() {

            this.queryParams = {

                "endTime": "",
                "orderFiled": "create_time",
                "pageNum": 1,
                "pageSize": 10,
                "startTime": ""
            }
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            this.queryParams.startTime = start
            this.queryParams.endTime = end
            this.fetchData()
        },
       
    }
}
</script>
<style scoped lang="scss">
.top{
    display: flex;
}
.top p {
    font-size: 18px;
    font-weight: bold;
    margin-right: 15px;
}
</style>
